<template>
  <div class="bottom-tab">
    <van-tabbar
      v-model="activeTab"
      active-color="#42bd56"
      inactive-color="#000"
    >
      <van-tabbar-item icon="home-o" v-for="item of tabs" :key="item.id">
        <span>{{ item.txt }}</span>
        <template #icon="props">
          <img
            class="tab-img"
            :src="props.active ? item.activeImg : item.normalImg"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { ref } from "vue";
export default defineComponent({
  setup() {
    const activeTab = ref(0);
    const tabs = reactive([
      {
        id: 1,
        txt: "首页",
        mark: "home",
        normalImg: require("@/assets/image/ic_tab_home_normal.png"),
        activeImg: require("@/assets/image/ic_tab_home_active.png"),
      },
      {
        id: 2,
        txt: "书影音",
        mark: "audio",
        normalImg: require("@/assets/image/ic_tab_audio_normal.png"),
        activeImg: require("@/assets/image/ic_tab_audio_active.png"),
      },
      {
        id: 3,
        txt: "广播",
        mark: "broadcast",
        normalImg: require("@/assets/image/ic_tab_broadcast_normal.png"),
        activeImg: require("@/assets/image/ic_tab_broadcast_active.png"),
      },
      {
        id: 4,
        txt: "小组",
        mark: "group",
        normalImg: require("@/assets/image/ic_tab_group_normal.png"),
        activeImg: require("@/assets/image/ic_tab_group_active.png"),
      },
      {
        id: 5,
        txt: "我的",
        mark: "mine",
        normalImg: require("@/assets/image/ic_tab_mine_normal.png"),
        activeImg: require("@/assets/image/ic_tab_mine_active.png"),
      },
    ]);
    return { activeTab, tabs };
  },
});
</script>

<style lang='scss' scoped>
.bottom-tab {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: pink;
  .tab-img {
    width: 26px;
    height: 26px;
  }
}
</style>
